<template>
  <div class="bg">
    <div class="title">欢迎注册</div>
    <van-form @submit="onSubmit" autocomplete="off">
      <van-field v-model="formData.mobile" name="手机号" placeholder="请输入手机号码" :rules="[
        { required: false, message: '请输入手机号码' }
      ]" />
      <van-field v-model="formData.verificationCode" name="验证码" placeholder="请输入验证码" :rules="[
        { required: false, message: '请输入验证码' }
      ]">
        <template #right-icon>
          <span class="solts">
            <van-button type="primary" class="getCodeClass" @click="getImgcode" :disabled="!!formData.counter">
              {{ formData.sendBtnText }}</van-button>
          </span>
        </template>
      </van-field>
      <van-field v-model="formData.password" :type="formData.passwordType" name="密码" placeholder="密码（8~16位字符)" :rules="[
        { required: false, message: '请输入密码  ' },
        { min: 8, max: 20, message: '密码长度在 8 到 20 个字符', trigger: 'blur' }
      ]" />
      <van-field v-model="formData.surePassword" :type="formData.passwordType" name="确认密码" placeholder="请再次输入密码" />
      <van-field v-model="formData.invitationCode" name="邀请码" placeholder="请输入邀请码或账号(非必填)" />
      <div class="alreadyAccount">
        已有账号,<span @click="this.$router.push('/login')">立即登录</span>
      </div>
      <van-button type="primary" class="block_gradual" :loading="formData.loading" native-type="submit">立即注册
      </van-button>
      <!-- <van-button type="primary" plain class="download" target="_blank" url="download.html">APP下载</van-button> -->
    </van-form>
    <!-- 图像验证码 -->
    <div v-if="formData.imgcodeShow" class="imgcode">
      <div class="warp">
        <van-icon name="close" @click="close" class='close' />
        <h1>请输入图像验证码</h1>
        <div class="flex">
          <img :src="formData.img" alt="">
          <van-cell-group inset>
            <van-field v-model="formData.imgcode" required placeholder="请输入验证码" />
          </van-cell-group>
        </div>
        <van-button type="primary" class="block_gradual" :loading="formData.loading" @click="GetCode">确定</van-button>
      </div>
    </div>
  </div>
  <van-checkbox v-model="formData.checked" checked-color="#37dc6d" class="policy">
    <div class="isAggressDiv">
      我已阅读并同意
      <span @click="openAgreement(1)">《用户协议》</span>
      <span @click="openAgreement(2)">《隐私政策》</span>
    </div>
  </van-checkbox>
  <privacy-policy :agreementData="agreementData" />
</template>
<script>
import { defineComponent, reactive, computed, onMounted } from 'vue'
import { Toast } from "vant";
import { register, getCode, imgcode, getUsercode } from "@/api/user";
import { useRouter } from 'vue-router'
import privacyPolicy from '@/components/privacyPolicy'
import { processDev } from '@/utils/env'
import versions from "@/utils/versions";
export default defineComponent({
  components: {
    privacyPolicy
  },
  setup() {

    const router = useRouter()
    const formData = reactive({
      mobile: '',
      verificationCode: '',
      password: '',
      surePassword: '',
      invitationCode: '',
      checked: true,
      passwordType: 'password',
      counter: 0,
      sendBtnText: "获取验证码",
      loading: false,
      imgcodeShow: false,
      imgcode: '',
      img: '',
      uuid: ''
    })
    const close = () => {
      formData.imgcodeShow = false
    }
    const agreementData = reactive({
      status: false,
      type: 1
    })
    const openAgreement = (type) => {
      agreementData.status = true
      agreementData.type = type
    }
    const getImgcode = () => {
      if (formData.mobile === '') {
        Toast('请填写手机号');
        return
      }

      imgcode().then(res => {
        console.log(res)
        if (res.data.success) {
          formData.imgcodeShow = true
          formData.img = res.data.data.img
          formData.uuid = res.data.data.uuid
        } else {
          formData.imgcodeShow = false
          Toast.fail(res.data.message);
        }

      })
    }
    const switchPasswordType = () => {
      formData.passwordType = formData.passwordType === 'password' ? 'text' : 'password'
    }
    const GetCode = () => {
      const data = { mobile: formData.mobile, type: 0, uuid: formData.uuid, verificationCode: formData.imgcode }
      Toast.loading({
        duration: 0,
        forbidClick: true
      });
      getCode(data).then(res => {
        if (!res.data.success) {
          getImgcode()
          console.log(res.data.message)
          Toast.fail(res.data.message);

        } else {
          formData.imgcodeShow = false
          Toast.clear();
          formData.counter = 60
          formData.sendBtnText = `(${formData.counter}秒)后重新发送`
          const timer = setInterval(() => {
            formData.counter--
            formData.sendBtnText = `(${formData.counter}秒)后重新发送`
            if (formData.counter <= 0) {
              formData.sendBtnText = "获取验证码"
              clearInterval(timer)
            }
          }, 1000)
        }
      })
    }
    const onSubmit = () => {
      if (!formData.checked) {
        Toast("请勾选我已阅读并同意《用户协议》《隐私政策》");
        return
      }
      if (formData.password != formData.surePassword) {
        Toast.fail('两次密码不一致');
        return
      }
      formData.loading = true
      register(formData).then(res => {
        if (res.data.success) {
          Toast.fail("注册成功");
          router.push('/login')
        } else {
          Toast.fail(res.data.message);
        }
        formData.loading = false
      })
    }
    const isApp = computed(() => {
      return processDev
    })
    onMounted(() => {//
      let shareCode = router.currentRoute.value.query.referrer
      if (shareCode) {
        const data = {
          invitationCode: shareCode
        }
        getUsercode(data).then(res => {
          console.log(res.data.data.state)
          if (res.data.data.state == 1) {
            formData.invitationCode = shareCode
          } else {
            formData.invitationCode = ''
            return Toast('该用户被冻结 邀请码已失效');
          }
        })
      }
    })
    return {
      formData,
      onSubmit,
      GetCode,
      switchPasswordType,
      getImgcode,
      close,
      isApp,
      openAgreement, agreementData
    }
  }
})
</script>
<style lang="less" scoped>
.policy {
  padding-left: 50px;
  position: fixed;
  bottom: 50px;
  display: flex;
  align-items: center;

  &:deep(.van-checkbox__icon) {
    width: 20px;
    height: 20px;
    font-size: 24px !important;
    line-height: 40px;
    margin-block: 5px;
  }

  .van-checkbox {
    margin-top: 60px;
  }
}

.van-checkbox {
  margin-top: 60px;

  &:deep(.van-checkbox__icon) {
    width: 26px;
    height: 26px;
    font-size: 26px;
  }

  .isAggressDiv {
    font-size: 28px;
    font-weight: 400;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    line-height: 48px;
    opacity: 0.6;

    span {
      font-weight: 400;
      color: #ffffff;
      line-height: 48px;
      background: linear-gradient(-90deg, #37dc6d 0%, #34d1f9 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}

.bg {
  .title {
    font-size: 36px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    line-height: 48px;
    margin-left: 60px;
    margin-top: 60px;
  }

  .van-form {
    padding: 60px;

    .getCodeClass {
      height: 47px;
      background: linear-gradient(-90deg, #37dc6d, #34d1f9);
      border-radius: 24px;
      border: none;
    }

    .alreadyAccount {
      font-size: 28px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.6);
      line-height: 48px;

      span {
        font-weight: 400;
        color: #ffffff;
        line-height: 48px;

        background: linear-gradient(-90deg, #37dc6d 0%, #34d1f9 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .block_gradual {
      margin-top: 20px;
    }

    .download {
      display: block;
      margin-top: 30px;
      width: 100%;
      height: 92px;
      text-align: center;
      font-size: 36px;
      font-weight: bold;
      color: #ffffff;
      opacity: 0.9;
      background: transparent;
      border-radius: 46px;
      border: none;
      background: linear-gradient(-90deg, #37dc6d 0%, #34d1f9 100%);

      span {
        font-size: 24px;
      }
    }
  }

  .imgcode {
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    height: 80vh;
    position: fixed;
    top: 0;
    left: 0%;
    padding-top: 4rem;

    .block_gradual {
      margin: 0.6rem 0px;
    }

    h1 {
      font-size: 36px;
      text-align: center;
    }

    .warp {
      &:deep(.van-field) {
        background: transparent;
      }

      margin: 0px 30px;
      position: relative;
      background: white;
      padding: 5%;
      border-radius: 8px;

      .close {
        position: absolute;
        font-size: 0.7rem;
        right: 3%;
        top: 3%;
      }

      .flex {
        margin-top: 0.5rem;
        display: flex;

        &:deep(.van-field) {
          border: solid 1px #8c8a8a;
          border-radius: 4px;
        }

        &:deep(.van-field__control) {
          font-size: 26px;
          color: #000000;
        }
      }
    }
  }
}
</style>